<!DOCTYPE html>
<html>
<head>
    <title>360度产品全景展示效果</title>
    <meta charset="utf-8"/>
    <link href="360.css" type="text/css" rel="stylesheet"/>
    <!--[if IE 6]>
    <script src="DD_belatedPNG_0.0.8a.js" type="text/javascript"></script>
    <script type="text/javascript">/imagesforcode/201211 / 4402 / DD_belatedPNG.fix('div');</script>
    <![endif]-->
    <script>
        window.onload = function () {
            var SCALE = 10;
            var oImg = document.getElementById('img1');
            var oTxt = document.getElementById('prog').getElementsByTagName('span')[0];
            var oBar = document.getElementById('bar');
            var aImg = [];
//            加载图片数量
            var iImgCount = 23;
            var iLoaded = 0;
            var iNow = 0;
            var i = 0;
            //加载所有资源
            for (i = 0; i < iImgCount; i++) {
                (function (i) {
                    var oNewImg = new Image();
                    oNewImg.onload = function () {
                        oTxt.innerHTML = oBar.style.width = Math.ceil(100 * iLoaded / iImgCount) + '%';
                        oNewImg.onload = null;
                        var oImg = document.createElement('img');
                        oImg.src = this.src;
                        oImg.style.display = 'none';
                        document.body.appendChild(oImg);
                        aImg[i] = oImg;
                        if (++iLoaded == iImgCount)onLoad();
                    };
                    oNewImg.src = '360/'+i+'.jpg';
                })(i);
            }
            //效果
            function onLoad() {
                for (i = 0; i < iImgCount; i++)if (!aImg[i])alert('资源加载失败，请刷新重试');
                var lastImg = null;
                document.getElementById('prog').style.display = document.getElementById('bg').style.display = 'none';
                document.body.removeChild(oImg);
                var body = document.body;
                oImg = null;
                var timer = null;
                var num = iNow;
                var speed = 0;
                aImg[0].style.display = 'block';
                lastImg = aImg[0];
                document.onmousedown = function (ev) {
                    var oEvent = ev || event;
                    var startX = oEvent.clientX;
                    var lastX = startX;
                    if (body.setCapture) {
                        body.onmousemove = onMove;
                        body.onmouseup = onUp;
                        body.setCapture();
                    }
                    else {
                        document.onmousemove = onMove;
                        document.onmouseup = onUp;
                    }
                    function onMove(ev) {
                        var oEvent = ev || event;
                        var i = -(oEvent.clientX - startX) / SCALE;
                        num = (iNow + i + Math.abs(Math.floor(i / iImgCount)) * iImgCount) % iImgCount;
                        if (lastImg != aImg[parseInt(num)]) {
                            lastImg.style.display = 'none';
                            aImg[parseInt(num)].style.display = 'block';
                            lastImg = aImg[parseInt(num)];
                        }
                        speed = -(oEvent.clientX - lastX) / SCALE;
                        lastX = oEvent.clientX;
                        return false;
                    }

                    function onUp() {
                        this.onmousemove = null;
                        this.onmouseup = null;
                        if (body.releaseCapture)body.releaseCapture();
                        iNow = num;
                        startMove();
                    }

                    stopMove();
                    return false;
                };
                function startMove() {
                    timer = setInterval(function () {
                        iNow = (iNow + speed + Math.abs(Math.floor(i / iImgCount)) * iImgCount) % iImgCount;
                        lastImg.style.display = 'none';
                        aImg[parseInt(iNow)].style.display = 'block';
                        lastImg = aImg[parseInt(iNow)];
                        speed *= 0.884;
                        if (Math.abs(speed) <= 1) {
                            clearInterval(timer);
                            speed = 0;
                        }
                    }, 30);
                }

                function stopMove() {
                    clearInterval(timer);
                }
            }
        };
    </script>
</head>
<br>
<!--加载图片路径-->
<img id="img1" src="./360/0.jpg"/>
<div id="bg"></div>
<div id="prog">
    360度全景展示 载入中......<span>0%</span>

    <div id="bar"></div>
</div>
<br >辛普劳032168康快斯特翘翘薯精选原料，健康百搭；先进工艺，使用方便；知名企业，品质保证。搭配上味好美的各类沙拉酱和调味酱，风味绝佳，比市场同类产品价格优势更大，质量更稳定。</br>
<br>如果不显示预览效果，请刷新一下本页面先~~ </br>　　　　　　　

</body>
</html>
